<template>
	<view>
		<view class="count">
			<view class="list">{{countDownList}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hb-countdown",
		props: {
			finish: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				countDownList: '00:00:00',
			}
		},
		watch: {
			finish: function(a, b) {
				//a是value的新值，b是旧值
				if (!a) {
		
				} else {
					this.queryData(a);
				}
			},
		},
		onLoad() {
			// this.finality();
			// console.log(this.data.finish,"this.finish1")
		},
		created() {
			 
			// this.finality();
		},
		methods: {
			queryData(a) {
				this.finish = a
				this.countDown();
			},
			// finality() {
			// 	this.$emit('finish');
			// },
			timeFormat(param) {
				return param < 10 ? '0' + param : param;
			},
			countDown() {
				// console.log(this.finish, "this.finish12222")
				let interval = setInterval(() => {
					// 获取当前时间，同时得到活动结束时间数组
					let newTime = new Date().getTime();
					// 对结束时间进行处理渲染到页面
					let endTime = this.finish;
					// console.log(this.finish, "this.finish1")
					let obj = null;
					// 如果活动未结束，对时间进行处理
					// console.log(endTime,"endTime")
					if (endTime - newTime > 0) {
						let time = (endTime - newTime) / 1000;
						// 获取天、时、分、秒
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt(time % (60 * 60 * 24) / 3600);
						let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
						let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
						obj = {
							day: this.timeFormat(day),
							hou: this.timeFormat(hou),
							min: this.timeFormat(min),
							sec: this.timeFormat(sec)
						};
					} else { // 活动已结束，全部设置为'00'
						obj = {
							day: '00',
							hou: '00',
							min: '00',
							sec: '00'
						};
						clearInterval(interval);
					}
					this.countDownList = obj.hou + ':' + obj.min + ':' + obj.sec;
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	.count {
		width: 100%;
		height: 100%;
		display: flex;

		.list {
			margin-left: 10rpx;
			// color: $hb-title-color;
			color: rgba(255, 255, 255, .6);
			align-self: center;
			margin-left: 10rpx;
			letter-spacing: 2rpx;
		}
	}
</style>
